<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="hintConten" v-if="onOff==true">
			<view class="keepOut" @click="close"></view>
			<view class="keepOutCont">
				<view class="keepOutContTop">
					<text>您还未登录</text>
					<text class="icon_onOff" @click="close">X</text>
				</view>
				<view class="keepOutContTitle">
					登录后可查看更多内容
				</view>
				<view class="keepOutContImg">
					<image src="https://www.atuanjian.com/appletStatic/static/huojian.png" mode=""></image>
				</view>
				<view class="keepOutContBottom">
					<view class="keepButtom" @click="close">
						取消
					</view>
					<navigator class="keepButtom" @click="login">登录</navigator>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<view class="hintConten" v-if="onOff==true">
			<view class="keepOut" @click="close"></view>
			<view class="keepOutCont">
				<view class="keepOutContTop">
					<text>您还未登录</text>
					<text class="icon_onOff" @click="close">X</text>
				</view>
				<view class="keepOutContTitle" style="font-size: 13px;">
					登录后可查看更多内容
				</view>
				<view>
					<view class="log-box">
						<view class="log-label">
							账号
						</view>
						<view class="log-content">
							<input class="input-class" v-model="account" />
						</view>
					</view>
					<view class="log-box">
						<view class="log-label">
							密码
						</view>
						<view class="log-content">
							<input type="password" class="input-class" v-model="pwd" />
						</view>
					</view>
				</view>
				<view class="keepOutContBottom">
					<view class="keepButtom" style="background-color: #FFB850; color: white;" @click="h5Login">
						登录
					</view>
				</view>
			</view>
		</view>

		<view class="hintConten" v-if="onRegister && !onOff">
			<view class="keepOut" @click="closeRegister"></view>
			<view class="keepOutCont">
				<view class="keepOutContTop">
					<text>注册</text>
					<text class="icon_onOff" @click="closeRegister">X</text>
				</view>
				<view>
					<view class="log-box">
						<view class="log-label">
							用户名
						</view>
						<view class="log-content">
							<input class="input-class" v-model="regUserName" />
						</view>
					</view>
					<view class="log-box">
						<view class="log-label">
							手机
						</view>
						<view class="log-content">
							<input class="input-class" v-model="regPhone" />
						</view>
					</view>
					<view class="log-box">
						<view class="log-label">
							验证码
						</view>
						<view class="code-content">
							<input class="input-class" v-model="regCode" />
						</view>
						<view class="code-button-content" :class="gettingCode ? 'disable' : ''" @click="getCode">
							<button style="height: 100%;line-height: 30px;">{{ gettingCode ? countDown : '获取' }}</button>
						</view>
					</view>
					<view class="log-box">
						<view class="log-label">
							密码
						</view>
						<view class="log-content">
							<input type="password" class="input-class" v-model="regPwd" />
						</view>
					</view>
				</view>
				<view class="keepOutContBottom">
					<view class="keepButtom" style="background-color: #FFB850; color: white;" @click="handleRegister">
						注册
					</view>
				</view>
			</view>
		</view>

		<!-- #endif -->

		<!--  -->
		<!-- #ifdef MP-WEIXIN -->
		<!-- <van-overlay :show="showTel">
			<view class="wrapper">
				<view class="title"><text>WELCOME</text></view>
				<view class="note"><text>欢迎来到蚂蚁团建小程序</text></view>
				<view class="get">为了提供更好的服务，蚂蚁团建小程序需要获取您的以下信息</view>
				<view class="tel">您的手机号码</view>
				<view class="btn">
					<button open-type="getPhoneNumber" @getphonenumber="getPhone">确认授权</button>
				</view>
			</view>
		</van-overlay> -->
		<!-- #endif -->

	</view>

</template>

<script>
	import {
		wxLogin,
		getPhoneNumber,
		h5Login,
		sendCode,
		userRegister
	} from "@/utils/request.js"
	import {
		http
	} from "@/utils/http.js";
	export default {
		data() {
			return {
				// onOff: true,
				isLog: false, // 登录 
				phoneNumber: '',
				showTel: false,
				userInfo: null,
				isShowLogView: false,
				account: '',
				pwd: '',
				regUserName: '',
				regPhone: '',
				regPwd: '',
				regCode: '',
				gettingCode: false,
				countDown: 60,
				countDownInterval: null
			}
		},
		props: {
			onOff: {
				type: Boolean,
				default: false
			},
			onRegister: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			closeRegister() {
				this.cleanRegMsg();
				uni.$emit('closeRegister', false);
			},
			cleanRegMsg() {
				this.regUserName = '';
				this.regPhone = '';
				this.regPwd = '';
				this.regCode = '';
			},
			handleRegister() {
				if (!this.testRegister()) return;
				const data = {
					username: this.regUserName,
					phone: this.regPhone,
					password: this.regPwd,
					code: this.regCode
				}
				this.register(data);
			},
			register(data) {
				userRegister(data).then(res => {
					if (res) {
						uni.showToast({
							title: res,
							icon: "none",
							duration: 3000
						});
					};
					this.closeRegister();
				}).catch(err => {
					uni.showToast({
						title: '注册失败, 请联系客服或者稍后再试',
						icon: "none",
						duration: 3000
					});
				});
			},
			testRegister() {
				if (!this.regUserName) {
					uni.showToast({
						title: "请输入用户名",
						icon: "none",
						duration: 3000
					});
					return false;
				}
				if (!this.isValidPhoneNumber(this.regPhone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none",
						duration: 3000
					});
					return false;
				}
				if (!this.regCode) {
					uni.showToast({
						title: "请输入验证码",
						icon: "none",
						duration: 3000
					});
					return false;
				}
				if (!this.regPwd) {
					uni.showToast({
						title: "请输入密码",
						icon: "none",
						duration: 3000
					});
					return false;
				}
				return true;
				
			},
			isValidPhoneNumber(phoneNumber) {
				var pattern = /^1[3456789]\d{9}$/;
				return pattern.test(phoneNumber);
			},
			getCode() {
				if (this.gettingCode) return;
				if (!this.isValidPhoneNumber(this.regPhone)) {
					uni.showToast({
						title: "请输入正确的手机号",
						icon: "none",
						duration: 3000
					});
				} else {
					this.sendCode({phone: this.regPhone});
				}
			},
			sendCode(data) {
				sendCode(data).then(res => {
					uni.showToast({
						title: '短信验证码发送成功10分钟内有效',
						icon: "none",
						duration: 3000
					});
					this.gettingCode = true;
					this.countDown = 60;
					this.countDownInterval = setInterval(this.startCountDown.bind(this), 1000);
				}).catch((err) => {
					this.gettingCode = false;
					uni.showToast({
						title: "获取验证码失败，请联系客服或者稍后再试",
						icon: "none",
						duration: 3000
					});
				});
			},
			startCountDown() {
				this.countDown--;
				if (this.countDown == 0) {
					this.gettingCode = false;
					clearInterval(this.countDownInterval);
					this.countDownInterval = null;
				}
			},
			open() {
				this.onOff = true
			},
			close() {
				// this.onOff = false
				uni.$emit('closeLogin')
			},
			// login(){
			// 	// uni.$emit('toLogin')
			// 	this.Login()
			// },
			login() {
				if (this.isLog) {
					return;
				}
				this.isLog = false;
				uni.navigateTo({
					url: '/pages/mine/wxLogin'
				})
				return false;
				uni.getUserProfile({
					desc: "用于登录",
					lang: "zh_CN",
					success: res1 => {
						uni.showLoading({
							title: "登陆中..."
						});
						console.log('登录获取', res1)
						uni.login({
							success: res2 => {
								console.log('登录获取', res2)
								let info = {
									avatarUrl: res1.userInfo.avatarUrl,
									nickName: res1.userInfo.nickName,
									gender: res1.userInfo.gender,
									province: res1.userInfo.province,
									city: res1.userInfo.city,
									country: res1.userInfo.country
								};
								let data = {
									code: res2.code,
									...info
								};
								this.wxLogin(data).then(result => {
									console.log('result', result)
									// if (result.code == 200) { 
									this.userInfo = result.userInfo
									uni.setStorageSync("userInfo", JSON.stringify(result
										.userInfo)); // 用户信息  
									uni.hideLoading();
									// phoneBinding
									uni.setStorageSync('phone', result.phoneBinding)
									if (!result.phoneBinding) {
										this.showTel = true
									}
									this.isLog = true;
									uni.$emit('closeLogin', 'login');
									// }
								}).catch(err => {
									this.isLog = false;
								})
							},
							fail: err => {
								this.isLog = false;
							}
						});
					},
					fail: err => {
						uni.showToast({
							title: "拒绝访问个人信息可能会导致部分功能无法正常使用",
							icon: "none",
							duration: 3000
						});
						this.isLog = false;
					}
				});

			},
			async wxLogin(data) {
				return await wxLogin(data);
			},
			h5Login() {
				uni.showLoading({
					title: "登陆中..."
				});
				const data = {
					phone: this.account,
					password: this.pwd
				};
				h5Login(data).then(result => {
					uni.hideLoading();
					if (result) {

						this.phoneNumber = result.phone
						uni.setStorageSync('phone', result.phone);
						let userInfo = result.wx_user;
						if (!userInfo) {
							userInfo = {
								nickName: result.username,
								phone: result.phone,
								
							}
						}
						userInfo.token = result.token;
						this.userInfo = userInfo;
						uni.setStorageSync("userInfo", JSON.stringify(userInfo));
						uni.setStorageSync('phone', userInfo.phone);
						uni.$emit('closeLogin', 'login');
						this.showTel = false;
					}
				}).catch(err => {
					uni.hideLoading();
					console.error(err);
				});
			},
			async h5LoginReq(data) {
				return await h5Login(data);
			},
			getPhone(e) {
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					uni.login({
						success: (res) => {
							let data = {
								token: this.userInfo.token,
								code: res.code,
								encryptedData: e.detail.encryptedData,
								iv: e.detail.iv
							}
							this.getPhoneNumber(data).then(res => {

								// if (res.code == 200) {
								this.phoneNumber = res.phone
								uni.setStorageSync('phone', res.phone)
								this.showTel = false
								uni.$emit('closeLogin', 'login')
								// }
							}).catch(err => {
								// console.log(err)
							})
						}
					})
				}
				// console.log('获取手机号',e)
			},
			async getPhoneNumber(data) {
				return await getPhoneNumber(data)
			},
		},
		onShow() {
			this.isLog = false;
		}

	}
</script>

<style lang="less">
	.disable {
		opacity: 0.5;
	}
	.log-box {
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 30px;
		line-height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		justify-content: flex-start;

		.log-label {
			width: 20%;
			text-align: right;
			height: 100%;
		}

		.log-content {
			width: 80%;
			height: 100%;
		}

		.code-content {
			width: 50%;
			height: 100%;
		}

		.code-button-content {
			height: 100%;
		}
	}

	.input-class {
		margin-left: 20px;
		border: 1px solid black;
		border-radius: 5px;
		height: 100%;
		width: 75%;
	}

	.hintConten {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.keepOut {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 888;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.keepOutCont {
		width: 70%;
		position: absolute;
		top: 15%;
		padding: 30rpx 10rpx 50rpx 0;
		left: 15%;
		z-index: 999;
		text-align: center;
		background-color: #fff;
		border-radius: 30rpx;
	}

	.keepOutContTop {
		font-size: 36rpx;
		color: #333;
		position: relative;

		.icon_onOff {
			position: absolute;
			top: -15rpx;
			right: 15rpx;
			color: #999;
			font-size: 35rpx;
		}
	}



	.keepOutContTitle {
		font-size: 32rpx;
		color: #999;
		margin-top: 30rpx;
	}

	.keepOutContImg {
		width: 60%;
		height: 250rpx;
		margin: 40rpx auto;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.keepOutContBottom {
		display: flex;
		justify-content: space-around;

		.keepButtom {
			width: 180rpx;
			height: 70rpx;
			border-radius: 30rpx;
			line-height: 70rpx;
			font-size: 30rpx;
		}

		view {

			background-color: #eeeeee;
			color: #333333;
			border: 2rpx solid #999;
		}

		navigator {

			background: linear-gradient(98deg, #FFB850 0%, #FF8000 100%);
			color: #ffffff;

		}
	}


	.wrapper {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 670rpx;
		height: 560rpx;
		background-color: #FFFFFF;
		border-radius: 28rpx;
		padding-top: 50rpx;
		padding-bottom: 30rpx;

		.title {
			text-align: center;
			font-size: 50rpx;
			margin-bottom: 38rpx;
		}

		.note {
			text-align: center;
			font-size: 30rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 24rpx;
			margin-bottom: 58rpx;
		}

		.get {
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			line-height: 48rpx;
			padding: 0 43rpx 0 50rpx;
			margin-bottom: 60rpx;
		}

		.tel {
			padding-left: 50rpx;
			margin-bottom: 66rpx;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #999999;
			line-height: 48rpx;
		}

		.btn {
			text-align: center;
		}
	}
</style>